<template>
    <div id="model">
        <div class="pie-title">设备型号</div>
        <div id="chart-model" ref="type"></div>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import { getDeviceModel } from '@/api/home/index.js';

export default {
    name: 'type',
    components: {},
    data() {
        return {
            data: [
            ],
            colors: []
        };
    },
    computed: {},
    created() {
        // if (process.client){}
    },
    mounted() {
        this.getDeviceType();
    },
    beforeCreate() { },
    beforeMount() { },
    methods: {
        init(data) {
            // let colors = []
            // data.forEach(item=>{
            //     colors.push(rgba(131, 150, 148))
            // })
            let dom = echarts.init(document.getElementById('chart-model'));
            let option = {
                tooltip: {
                    trigger: 'item',
                    confine: true,
                    formatter: (params) => {
                        // console.log(params);
                        return `<div>${params.marker}${params.data.name}:<span style="display: inline-block;width: 40px;text-align: center;">${params.data.value}</span> <span>(${params.percent}%)</span></div>`;
                    },
                },
                legend: {
                    itemWidth: 10,
                    itemHeight: 10,
                    orient: 'vertical',
                    icon: 'circle',
                    top: '10%',
                    right: '10%',
                    itemGap: 20,
                    formatter: (name) => {
                        let value = data.filter((item) => item.name == name)[0];
                        return `{title|${name}}{value|${value.value}}`;

                    },
                    // data,
                    textStyle: {
                        padding: [2, 0, 0, 0],
                        color: 'rgba(255, 255, 255, 0.6)',
                        rich: {
                            title: {
                                padding: [0, 10, 0, 10],
                                width: 120,
                                fontSize: 14,
                            },
                            value: {
                                width: 40,
                                fontSize: 14,
                                color: '#fff'
                                // align: 'center',
                            },
                            percent: {
                                width: 65,
                                fontSize: 14,
                                // align: 'left',
                            },
                        },
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        center: ['25%', '40%'],
                        radius: ['0%', '75%'],
                        avoidLabelOverlap: true,
                        // itemStyle: { borderColor: '#fff', borderWidth: 2 },
                        color: ["#95A4A3", "#839694", "#698280"],
                        label: {
                            normal: {
                                position: 'inner',
                                formatter: params => {
                                    return (
                                        '{percent|' + (params.percent == 0 ? '' : (params.percent.toFixed(0) + '%')) + '}'
                                    );
                                },
                                rich: {
                                    percent: {
                                        color: "#FFF",
                                        align: 'right',
                                        fontSize: 15,
                                        fontWeight: '500',
                                        //padding: [0, 5]
                                    },
                                },
                            }
                            // alignTo: 'labelLine', // ! 文字对齐方式
                            // formatter: (params) => {
                            //     return `${params.data.name}\n${params.data.value}个  ${params.percent ? params.percent : 0}%`;
                            // },
                        },
                        data
                    },
                ],
            };
            dom.setOption(option);
            addEventListener('resize', function () {
                dom.resize();
            });
        },
        async getDeviceType() {
            const res = await getDeviceModel();
            if (res.code == 200) {
                this.data = [];
                this.colors = []
                res.data.forEach((item, index) => {
                    this.total += item.modelCount
                    this.data.push({
                        name: item.model,
                        value: item.modelCount,
                    });
                    this.colors.unshift('rgb(131, 150, 148,' + ((index + 1) / res.data.length)) + ')'
                });
                if (this.data.length > 0) {
                    this.$nextTick(()=>{
          this.init(this.data);
        })
                }

            }
        },
    },
};
</script>
<style lang='scss' scoped>
#model {
    width: 100%;
    height: 100%;

    .pie-title {
        height: 60px;
        line-height: 60px;
        margin-left: 30px;
        background: linear-gradient(180deg, #EEFAFF 0%, #5C899F 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 17px;
        font-weight: 600;
    }

    >div {
        height: calc(100% - 60px);
    }
}
</style>